<template>
  <section>
    <el-checkbox-group v-model="selTypes">
      <el-checkbox v-for="item in itemList" :key="item.id" :label="item.id" @change="selEvent($event,item)">{{item.name}}</el-checkbox>
    </el-checkbox-group>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "selType",
    props:['selItems'],
    data(){
      return{
        currItem:null,
        itemList:null,
        filterObj:{},
        selTypes:[]
      }
    },
    created(){
      this.getList()
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
      selItems(nv,oc){
        if(nv) this.getList()
      },
      selTypes(nv,ov){
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      test() {
        console.log('为啥又循环-------')
        this.getList()
      },
      getList(filterObj) {
        this.fetch({name: "getExamineTypeList", data: {departmentId: this.department.id, ...filterObj}})
          .then(res => {
            this.itemList = res
            this.selTypes=[]
            if(this.selItems.length>0) this.makeChecks(res)
          })
          .catch(err => {
            console.log(err)
            errHandler.handle(this, err)
          })
      },
      makeChecks(res){
        this.selItems.forEach(item=>{
          let tmp =res.find(i=>i.data.instanceId == item.data.instanceId)
          this.selTypes.push(tmp.id)
        })
        console.log('看下数组=---------',this.selTypes)
      },
      selEvent(e,row){
        console.log('单个多选框----------',e,row)
        let data={event:e,type:row}
        this.$emit('selItem',data)
      }
    }
  }
</script>

<style scoped>
.el-checkbox{
  border: 0px solid red;
  width: 20%;
}
</style>
